<!-- 设置浏览器的版本 ,解析规范 -->
<!DOCTYPE html>
<!--设置网页的开始 结束 lang表示网页的语言-->
<html lang="en">
<!--设置网页的配置信息-->
<head>
    <!--设置编码格式 防止乱码-->
    <meta charset="UTF-8">
    <!--设置网页的标题-->
    <title>Title</title>
</head>
<body>
<div>
    <!--HTML 超文本标记语言-->
    <!--文本标签-->
    <b>加粗文字</b>
    <i>斜体文字</i>
    <u>下划线文字</u>
    <s>删除线文字</s>
    <mark>标记文字</mark>
    <h1>标题</h1>
    <h6>标题~6</h6>
    <p>段落,标签 块级</p>
    <!--分割线标签 单标签-->
    <hr>
    <!--序列-->
    <ol type="A">
        <li>1</li>
    </ol>
    <ul type="none">
        <li>2</li>
    </ul>
    <!--行内分区 span不会进行换行-->
    hello <span style="color: #f00"> hello </span>world
    <!--块级元素分区 占父级元素的100% 高度为0 由其中的内容决定高度-->
    <div>
        我是内容
    </div>
    <!-- 带有语义的div标签-->
    <!--头部-->
    <header>顶部</header>
    <nav>导航</nav>
    <main>主要内容</main>
    <footer>底部</footer>
    <aside>侧边栏</aside>
    <section>独立内容</section>
    <article>文章</article>
    <!-- URL路径-->
    <!--相对路径 根据当前文件的路径来定位 ../回到上一级目录 在当前目录直接引用 在下一级目录写文件价/地址-->
    <img src="../../3.png">
    <!--<img src="1.png">
    <img src="img/1.png">-->

    <!--绝对路径 根据网页的根目录来定位(从协议开始出发),或者根据本地的根目录进行出发-->
    <!-- 使用绝对路径 -->
    <!-- 如果远程服务器的资源删除，绝对路径就引用不到图片资源了  -->
    <img src="https://cdn.tmooc.cn/bsfile//courseImg///5f791c0985cc4a67a5c4dca6627155b0.jpg" alt="">
    <!--alt 属性 用来设置图片加载失败时的默认文字 title 用于描述图片-->
    <img src="../../3.png" alt="图片加载失败" title="描述图片"></img>
    <!--表格-->
    <!-- table border 属性设置边框-->
    <!--style="border-collapse: collapse;"设置边框合并-->
    <table border="1px" style="border-collapse: collapse;">
        <!--设置表格的标题-->
        <caption>表格标题</caption>
        <!--设置表格的标题行 标题行默认加粗且居中-->
        <tr>
            <th>111111111</th>
            <th>222222222</th>
        </tr>
        <!--设置表格的内容行-->
        <tr>
            <!--设置标题行中的文本内容水平对齐方式 居中-->
            <td style="text-align: center">1</td>
            <td>2</td>
        </tr>
        <tr>
            <!--设置合并单元格 colspan="2" 跨两列-->
            <td colspan="2" >1</td>
        </tr>
        <tr>
            <!--设置合并单元格 rowspan="2" 跨两行-->
            <td rowspan="2">1</td>
            <td>2</td>
        </tr>
        <tr>
           <!-- <td>1</td>-->
            <td>2</td>
        </tr>
        <tr>
            <!-- 设置合并单元格 colspan="2" 跨两列，rowspan="2" 跨两行 -->
            <td colspan="2" rowspan="2">1</td>
        </tr>
        <tr>
            <!-- 这一行不需要其他单元格，因为上一个单元格已经占据了这两列 -->
        </tr>
        <tr>
            <!-- 新的一行 -->
            <td>2</td>
            <td>3</td>
        </tr>
    </table>

    <!--超链接-->
    <!--跳转到本地资源-->
    <a href="text.html"></a>
    <!--跳转到外部资源-->
    <a href="https://www.baidu.com">百度</a>
    <!--图片跳转-->
    <a href="https://www.baidu.com" >
        <img src="../../3.png">
    </a>
    <!--_blank 新窗口打开 _self刷新当前页面-->
    <a href="https://www.baidu.com" target="_blank">百度</a>
    <a href="https://www.baidu.com" target="_self">百度</a>
    <!--锚点跳转-->
    <a href="#c1">锚点跳转222</a>
    <a href="#c2">锚点跳转1111</a>
    <a href="#">回到顶部锚点</a>
    <h2 id="c1">2222</h2>
    <h2 id="c2">11111</h2>
    <!--表单-->
    <!--
    form 表单 action 表单提交地址 #表示占位 method 提交方式
    属性： type 表单类型 例：(text 文本框 password 密码框)
    value 默认值 如果是输入框，可以设置默认值 如果是按钮，可以设置按钮的文字
    placeholder 提示文字
    maxlength 最大长度
    readonly 只读
    disabled 禁用
    checked 默认选中
    -->
    <form action="#" method="post">
        <input type="text" name="name" placeholder="提升词" maxlength="6">文本输入框
        <input type="password" name="password" value="123456">密码框
        <input type="submit" value="提交按钮"> 提交
        <input type="reset" value="重置按钮">
        <input type="button" value="普通按钮">
        <button>h5新增按钮</button>
        <input type="radio" name="ager"  id="ok">同意
        <label for="ok">同意吗同意吗同意吗</label>
        <input type="checkbox">多选框
        <input type="date" name="day">日期
        <input type="file" name="file">文件上传
        <input type="color" name="color">颜色选择
        <input type="range">范围
        <!--下拉列表框-->
        <select name="city">
            <option value="beijing" selected>北京</option>
            <option value="shanghai">上海</option>
            <option value="shenzhen">深圳</option>
        </select>
        <!--控件绑定-->
        <input type="checkbox" id="agee">
        <label for="agee">同意</label>
    </form>


</div>

</body>
</html>